<template>
  <page-container :title="$route.meta.title">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <div slot="header">
            <span>总任务数</span>
          </div>
          <div class="stat-content">
            <i class="el-icon-s-order"></i>
            <div class="stat-number">{{ totalJobs }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div slot="header">
            <span>运行中任务</span>
          </div>
          <div class="stat-content">
            <i class="el-icon-play" style="color: #67c23a;"></i>
            <div class="stat-number">{{ runningJobs }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div slot="header">
            <span>已暂停任务</span>
          </div>
          <div class="stat-content">
            <i class="el-icon-pause" style="color: #e6a23c;"></i>
            <div class="stat-number">{{ pausedJobs }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div slot="header">
            <span>今日执行失败</span>
          </div>
          <div class="stat-content">
            <i class="el-icon-error" style="color: #f56c6c;"></i>
            <div class="stat-number">{{ failedJobsToday }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 最近执行任务 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>最近执行任务</span>
          </div>
          <el-table
            :data="recentJobLogs"
            border
            style="width: 100%;"
          >
            <el-table-column prop="jobName" label="任务名称" width="200"></el-table-column>
            <el-table-column prop="executeTime" label="执行时间" width="180" :formatter="formatDate"></el-table-column>
            <el-table-column prop="executeDuration" label="耗时(ms)" width="100"></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                  {{ scope.row.status === 1 ? '成功' : '失败' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button 
                  size="mini" 
                  type="text" 
                  @click="handleViewLog(scope.row)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <!-- 任务执行统计 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>今日任务执行统计</span>
          </div>
          <div class="chart-container">
            <el-chart height="300px">
              <el-pie
                :data="executionStats"
                radius="70%"
                label-position="outside"
                legend-position="bottom"
              ></el-pie>
            </el-chart>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </page-container>
</template>

<script>
import { getDashboardStats, getRecentJobLogs, getExecutionStats } from '@/api/dashboard'
import PageContainer from '@/components/common/PageContainer.vue'

export default {
  name: 'Dashboard',
  components: {
    PageContainer
  },
  data() {
    return {
      totalJobs: 0,
      runningJobs: 0,
      pausedJobs: 0,
      failedJobsToday: 0,
      recentJobLogs: [],
      executionStats: []
    }
  },
  methods: {
    // 格式化日期
    formatDate(value) {
      return this.$options.filters.formatDate(value)
    },
    
    // 查看日志详情
    handleViewLog(row) {
      this.$router.push({
        path: '/log/job',
        query: { jobName: row.jobName, jobGroup: row.jobGroup }
      })
    },
    
    // 获取仪表盘统计数据
    getDashboardStats() {
      getDashboardStats().then(response => {
        const { totalJobs, runningJobs, pausedJobs, failedJobsToday } = response.data
        this.totalJobs = totalJobs
        this.runningJobs = runningJobs
        this.pausedJobs = pausedJobs
        this.failedJobsToday = failedJobsToday
      })
    },
    
    // 获取最近执行日志
    getRecentJobLogs() {
      getRecentJobLogs().then(response => {
        this.recentJobLogs = response.data
      })
    },
    
    // 获取执行统计
    getExecutionStats() {
      getExecutionStats().then(response => {
        this.executionStats = response.data
      })
    }
  },
  created() {
    this.getDashboardStats()
    this.getRecentJobLogs()
    this.getExecutionStats()
  }
}
</script>

<style scoped>
.stat-card {
  height: 100%;
}

.stat-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.stat-content i {
  font-size: 36px;
  color: #409EFF;
  margin-right: 20px;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
}

.chart-container {
  width: 100%;
  height: 100%;
  padding-top: 10px;
}
</style>
